<template>
  <div
    class="resource-home"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor1,
      borderRight: `1px solid ${themeStyle[theme].borderColor1}`
    }"
    ref="resourceHomeRef"
  >
    <div
      class="resource-home-title"
      :style="{
        backgroundColor: themeStyle[theme].backgroundColor2,
        color: themeStyle[theme].textColor1
      }"
    >
      <span>资源管理器</span>
      <svg-icon
        name="funClose"
        size="0.9em"
        :color="themeStyle[theme].textColor1"
        class="icon"
        @click="closeResourceHome"
      ></svg-icon>
    </div>

    <div class="resource-home-content" :style="{ color: themeStyle[theme].textColor3 }">
      <div
        class="content-subtitle"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3
        }"
        @click="openItem('layer')"
      >
        <div
          class="arrow-icon"
          :style="{ transform: `rotate(${openProject === 'layer' ? 90 : 0}deg` }"
        >
          <RightOutlined />
        </div>
        <span>图层</span>
      </div>
      <size-transition ref="layerRef">
        <div class="resource-item" :style="{ height: `${parentHeight - 110}px` }">
          <Layer />
        </div>
      </size-transition>

      <div
        class="content-subtitle"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3
        }"
        @click="openItem('projectFile')"
      >
        <div
          class="arrow-icon"
          :style="{ transform: `rotate(${openProject === 'projectFile' ? 90 : 0}deg` }"
        >
          <RightOutlined />
        </div>
        <span>项目文件</span>
      </div>
      <size-transition ref="projectFileRef">
        <div class="resource-item" :style="{ height: `${parentHeight - 110}px` }">
          <ProjectFile />
        </div>
      </size-transition>

      <div
        class="content-subtitle"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3
        }"
        @click="openItem('toolPresets')"
      >
        <div
          class="arrow-icon"
          :style="{ transform: `rotate(${openProject === 'toolPresets' ? 90 : 0}deg` }"
        >
          <RightOutlined />
        </div>
        <span>工具预设</span>
      </div>
      <size-transition ref="toolPresetsRef">
        <div
          class="resource-item"
          :style="{ height: openProject === 'toolPresets' ? `${parentHeight - 110}px` : '0px' }"
        ></div>
      </size-transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { RightOutlined } from '@ant-design/icons-vue'
import SizeTransition from '@renderer/components/sizeTransition/SizeTransition.vue'
import { onMounted, ref } from 'vue'
import Layer from './components/Layer.vue'
import ProjectFile from './components/ProjectFile.vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const resourceHomeRef = ref<InstanceType<typeof HTMLElement>>()
const layerRef = ref<InstanceType<typeof SizeTransition>>()
const projectFileRef = ref<InstanceType<typeof SizeTransition>>()
const toolPresetsRef = ref<InstanceType<typeof SizeTransition>>()

//父容器高度
const parentHeight = ref<number>(0)

onMounted(() => {
  //获取父容器的高度
  resize()
  window.addEventListener('resize', resize)

  projectFileRef.value?.contract()
  toolPresetsRef.value?.contract()
})

const resize = () => {
  parentHeight.value = resourceHomeRef.value?.offsetHeight || 0
}

//开启的项目
const openProject = ref<'layer' | 'projectFile' | 'toolPresets' | ''>('layer')
const openItem = (item: 'layer' | 'projectFile' | 'toolPresets') => {
  if (openProject.value === item) {
    openProject.value = ''
  } else {
    openProject.value = item
  }
  layerRef.value?.contract()
  projectFileRef.value?.contract()
  toolPresetsRef.value?.contract()
  if (item === 'layer' && openProject.value !== '') {
    layerRef.value?.expand()
  }
  if (item === 'projectFile' && openProject.value !== '') {
    projectFileRef.value?.expand()
  }
  if (item === 'toolPresets' && openProject.value !== '') {
    toolPresetsRef.value?.expand()
  }
}

const closeResourceHome = () => {
  useStyleStore().resizeResource(0)
}
</script>

<style scoped lang="scss">
.resource-home {
  height: 100%;
  font-size: $font-size-small;

  .resource-home-title {
    padding: 0px 5px;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    text-wrap: nowrap;

    .icon {
      width: 25px;
      cursor: pointer;
    }
  }

  .resource-home-content {
    height: calc(100% - 25px);

    .content-subtitle {
      margin-top: 5px;
      padding-left: 10px;
      display: flex;
      justify-content: left;
      align-items: center;
      gap: 5px;
      cursor: pointer;

      .arrow-icon {
        font-size: 12px;
        transition: all 0.3s;
      }
    }
  }
}
</style>
